// import axios from 'axios';
// import React, { useEffect, useState } from 'react';
// import { Search, Tabs, Image } from 'react-vant'
// const { TabPane } = Tabs

// const List = (props) => {
//   const { list } = props;

//   return (
//     <div>
//       {
//         list.map(v => {
//           return <dl key={v.id}>
//             <dt><Image src={v.image} alt="" lazyload/></dt>
//             <dd>
//               <h3>{v.title}</h3>
//               <p>{v.desc}</p>
//             </dd>
//           </dl>

//         })
//       }
//     </div>  
//   )
// }

// const App = () => {
//   const [tabs, setTabs] = useState([]);

//   const getTabs = async () => {
//     const resp = await axios.get('/api/tabs');
//     setTabs(resp.data.data)
//   }

//   useEffect(() => {
//     getTabs()
//   }, [])
//   return (
//     <div>
//       <Search></Search>

//       <Tabs>
//         {
//           tabs.map(v => {
//             return <TabPane key={v.id} title={v.title}>
//               <List list={v.children}></List>
//             </TabPane>
//           })
//         }
//       </Tabs>
//     </div>  
//   )
// }

// export default App


// ---------------------------------------------------------------------------------
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Search, Image, List as VantList } from 'react-vant'


const List = (props) => {
  const { list } = props;

  return (
    <div>
      {
        list.map(v => {
          return <dl key={v.id}>
            <dt><Image src={v.image} alt="" lazyload width="100vw" height={300} /></dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
            </dd>
          </dl>
        })
      }
    </div>
  )
}

const types = ["推荐", "手机", "电脑", "电视", "衣服"]
const App = () => {
  const [list, setlist] = useState([]);
  const [type, setType] = useState('推荐');
  const [pageCode, setPageCode] = useState(1)

  const getList = async () => {
    const resp = await axios.get('/api/list', { params: { type, pageCode } });
    if (pageCode === 1) {
      setlist(resp.data.data)
    } else {
      setlist(list.concat(resp.data.data));
    }
  }

  useEffect(() => {
    getList()
  }, [type, pageCode])
  return (
    <div>
      <Search></Search>
      <div className="title" style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: 36 }}>
        {
          types.map((v, i) => {
            return (<span
              key={i}
              style={{ color: v === type ? 'red' : '#000' }}
              onClick={() => {
                setType(v);
                setPageCode(1);
              }}
            >{v}</span>)
          })
        }
      </div>
      <VantList onLoad={() => setPageCode(pageCode + 1)}>
        <List list={list}></List>
      </VantList>

    </div>
  )
}

export default App